import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'logic.dart';

class SettingsMorePage extends StatelessWidget {
  SettingsMorePage({super.key});

  final logic = Get.find<SettingsMoreLogic>();
  final state = Get.find<SettingsMoreLogic>().state;

  @override
  Widget build(BuildContext context) {
    var settingsMoreListData = [
      {
        "name": LocaleKeys.settings_camera_remote.ts,
        "icon": "assets/images/device/ic_settings_more_camera.png",
        "route": "/device/settings/takepic"
      },
      {
        "name": LocaleKeys.settings_find_bracelet.ts,
        'custom': 'find',
        "icon": "assets/images/device/ic_settings_more_find.png",
        "route": "/device/settings/bracelet/find"
      },
      {
        "name": LocaleKeys.settings_find_my_phone.ts,
        'custom': 'findMyPhone',
        "icon": "assets/images/device/phone_vibrates.png",
      },
      // {
      //   "name": LocaleKeys.settings_brighten_screen.ts,
      //   'custom': 'brighten_screen',
      //   "icon": "assets/images/device/ic_settings_more_bs.png",
      //   "route": "/device/settings/brightenScreen"
      // },
      {"name": LocaleKeys.settings_24HR.ts, 'custom': '24HR', "icon": "assets/images/device/ic_settings_more_24HR.png"},
      {
        "name": LocaleKeys.settings_language.ts,
        'custom': 'language',
        "icon": "assets/images/device/ic_settings_language.png",
        "route": "/device/settings/language"
      },
    ];

    return Scaffold(
      appBar: AppBar(
        leading: BackBtnIcon(onTap: () => Get.back()),
        centerTitle: true,
        title: Text(LocaleKeys.settings_more.ts, style: TextStyle(fontSize: 54.sp)),
      ),
      body: Padding(
        padding: EdgeInsets.only(top: 130.h, left: 42.w, right: 42.w),
        child: Column(
          children: settingsMoreListData
              .asMap()
              .map((index, item) => MapEntry(index, _buildListTile(item, index == 0, index == settingsMoreListData.length - 1)))
              .values
              .toList(),
        ),
      ),
    );
  }

  Widget _buildCustomSettings(item) {
    var custom = item['custom'];
    Widget widget = const Icon(Icons.arrow_forward_ios, size: 16);

    if (custom == 'brighten_screen') {
      return Obx(
        () => SizedBox(
          width: 90,
          child: Row(
            children: [
              SizedBox(width: 60.w),
              Text(logic.getSelectItemText(), style: TextStyle(fontSize: 42.sp)),
              SizedBox(width: 30.w),
              widget,
            ],
          ),
        ),
      );
    } else if (custom == '24HR') {
      return Obx(
        () => Transform.scale(
          scaleY: 0.7,
          scaleX: 0.7,
          child: CupertinoSwitch(
            // trackColor: MaterialStateProperty.all(Colors.red),   // 激活时原点的颜色。
            activeColor: Colors.red,
            // activeTrackColor: Colors.red,
            // 激活时横条的颜色。
            // inactiveTrackColor: Colors.grey.withOpacity(0.2),
            // 非激活时横条的颜色。
            // inactiveThumbColor: Colors.white.withOpacity(0.4),  // 非激活时原点的颜色。
            value: state.is24HR.value,
            onChanged: (value) => logic.setTimeDisplay(value),
          ),
        ),
      );
    } else if (custom == 'findMyPhone') {
      return Obx(
        () => Transform.scale(
          scaleY: 0.7,
          scaleX: 0.7,
          child: CupertinoSwitch(
            activeColor: Colors.red,
            value: state.enableFindMyPhone.value,
            onChanged: (value) => logic.setFindMyPhone(value),
          ),
        ),
      );
    } else if (custom == 'language') {
      return Obx(
        () => SizedBox(
          width: 270.w,
          child: Row(
            children: [
              Text(state.selectedLanguageName.value, style: TextStyle(fontSize: 42.sp)),
              SizedBox(width: 30.w),
              widget,
            ],
          ),
        ),
      );
    }
    return SizedBox(width: 90.w, child: widget);
  }

  Widget _buildListTile(item, isFirst, isLast) {
    var borderRadius = BorderRadius.circular(0);
    if (isFirst) {
      borderRadius = const BorderRadius.vertical(top: Radius.circular(8));
    } else if (isLast) {
      borderRadius = const BorderRadius.vertical(bottom: Radius.circular(8));
    }
    return Ink(
      decoration: BoxDecoration(color: Colors.white, borderRadius: borderRadius),
      child: InkResponse(
        splashColor: ColorConst.activeColor,
        borderRadius: borderRadius,
        highlightShape: BoxShape.rectangle,
        highlightColor: ColorConst.activeColor,
        containedInkWell: true,
        child: ListTile(
          contentPadding: EdgeInsets.only(left: 29.w),
          leading: SizedBox(
            width: 80.w,
            height: 80.h,
            child: Center(
              child: Image.asset(item['icon']),
            ),
          ),
          title: Text(item['name'], style: TextStyle(fontSize: 48.sp)),
          trailing: _buildCustomSettings(item),
        ),
        onTap: () => {
          if (item['custom'] == 'find') {
            logic.toggleSetFindMyPhone()
          }
          else if (item['custom'] == 'language') {
            logic.toLanguageSettingPage(item['route'])
          }
          else {
            item['route'] == null ? '' : Get.toNamed(item['route'])
          }
        },
      ),
    );
  }
}
